<template>
	<view class="article-card" :class="[`card-size-${size}`,isDark?'dark':'']">
		<!-- 封面图 -->
		<view class="article-cover">
            <block v-if="item.category && item.category.length > 0 && item.category[0].slug !== 'vip'">
                <image :src="item.images && item.images.length > 0 ? item.images[0] : no_img" mode="aspectFill"></image>
            </block>
            <block v-else>
                <image :src="item.images && item.images.length > 0 ? item.images[0] : vip_img" mode="aspectFill"></image>
            </block>
		</view>
		<!-- 标题 -->
		<view class="article-title" :class="[`title-size-${size}`]">
			<text>{{replaceSpecialChar(item.title)}}</text>
		</view>
		<!-- 作者信息和自定义显示区 -->
		<view class="article-info">
			<!-- 左侧作者信息 -->
            <view class="author-info">
				<view v-if="item.authorInfo" class="user-avatar">
					<image :src="item.authorInfo.avatar" mode="aspectFill"></image>
					<image class="user-rz-icon" :src="rzImg" mode="aspectFill" v-if="item.authorInfo.lvrz==1"></image>
				</view>
				<view v-else class="user-avatar">
					<image :src="no_img" mode="aspectFill"></image>
				</view>
				<text class="user-name" :class="item.authorInfo && item.authorInfo.isvip>0?'name-vip':''">
					{{item.authorInfo ? item.authorInfo.name : $t('comp.articlecard.unknownauthor')}}
				</text>
			</view>
			
			<!-- 右侧自定义显示区 -->
			<view class="custom-info">
				<!-- 在大尺寸卡片时，显示指标 -->
				<block v-if="size === 'large'">
					<!-- 指标容器 (横向排列) -->
					<view class="info-items-row">
						<!-- 发布时间（仅在showType为time时显示） -->
						<view v-if="showType === 'time'" class="info-item">
							<text class="info-text time-text">{{formatDate(item.created)}}</text>
						</view>
						
						<!-- 其他指标 -->
						<template v-else>
							<!-- 第一个指标(主指标) -->
							<view v-if="showType" class="info-item">
								<!-- 浏览量 -->
								<template v-if="showType === 'views' || showType === 'views,likes' || showType === 'views,comments'">
									<text class="tn-icon-eye"></text>
									<text class="info-text">{{formatNumber(item.views)}}</text>
								</template>
								<!-- 点赞数 -->
								<template v-else-if="showType === 'likes' || showType === 'likes,views' || showType === 'likes,comments'">
									<text class="tn-icon-like-lack"></text>
									<text class="info-text">{{item.likes}}</text>
								</template>
								<!-- 评论数 -->
								<template v-else-if="showType === 'comments' || showType === 'comments,views' || showType === 'comments,likes'">
									<text class="tn-icon-comment"></text>
									<text class="info-text">{{item.commentsNum}}</text>
								</template>
							</view>
							
							<!-- 第二个指标(次要指标) -->
							<view class="info-item" v-if="showType && showType.includes(',')">
								<!-- 浏览量作为第二指标 -->
								<template v-if="showType === 'likes,views' || showType === 'comments,views'">
									<text class="tn-icon-eye"></text>
									<text class="info-text">{{formatNumber(item.views)}}</text>
								</template>
								<!-- 点赞数作为第二指标 -->
								<template v-else-if="showType === 'views,likes' || showType === 'comments,likes'">
									<text class="tn-icon-like-lack"></text>
									<text class="info-text">{{item.likes}}</text>
								</template>
								<!-- 评论数作为第二指标 -->
								<template v-else-if="showType === 'views,comments' || showType === 'likes,comments'">
									<text class="tn-icon-comment"></text>
									<text class="info-text">{{item.commentsNum}}</text>
								</template>
							</view>
						</template>
					</view>
				</block>
				<!-- 在中尺寸卡片时，只显示一个指标（但不显示time） -->
				<block v-else>
					<!-- 浏览量 -->
					<view v-if="showType === 'views'" class="info-item">
						<text class="tn-icon-eye"></text>
						<text class="info-text">{{formatNumber(item.views)}}</text>
					</view>
					<!-- 点赞数 -->
					<view v-else-if="showType === 'likes'" class="info-item">
						<text class="tn-icon-like-lack"></text>
						<text class="info-text">{{item.likes}}</text>
					</view>
					<!-- 评论数 -->
					<view v-else-if="showType === 'comments'" class="info-item">
						<text class="tn-icon-comment"></text>
						<text class="info-text">{{item.commentsNum}}</text>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import darkModeMixin from '@/utils/darkModeMixin.js'
	export default {
		mixins: [darkModeMixin],
		props: {
			item: {
				type: Object,
				default: () => ({})
			},
			showType: {
				type: String,
				default: 'views'  // 可选值: views, likes, comments, time（time只能单独使用且只在大尺寸显示）
			},
			size: {
				type: String,
				default: 'medium'  // 可选值: medium, large
			}
		},
		name: "articleCardHorizontal",
		data() {
			return {
				rzImg: this.$API.SPRz(),
                // #ifdef APP-PLUS || MP
				vip_img: "../../static/page/vip_img.png",
				vip_img_big: "../../static/page/vip_img_big.png",
				no_img: "../../static/page/pic.png",
				// #endif
				// #ifdef H5
				vip_img: "/h5/static/page/vip_img.png",
				vip_img_big: "/h5/static/page/vip_img_big.png",
				no_img: "/h5/static/page/pic.png",
				// #endif
			};
		},
		methods: {
			replaceSpecialChar(text) {
				if (!text) return '';
				text = text.replace(/&quot;/g, '"');
				text = text.replace(/&amp;/g, '&');
				text = text.replace(/&lt;/g, '<');
				text = text.replace(/&gt;/g, '>');
				text = text.replace(/&nbsp;/g, ' ');
				return text;
			},
			formatNumber(num) {
				if (!num) return 0;
				return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num;
			},
			formatDate(datetime) {
				if (!datetime) return '';
				var datetime = new Date(parseInt(datetime * 1000));
				var now = new Date();
				var year = datetime.getFullYear(),
					month = ("0" + (datetime.getMonth() + 1)).slice(-2),
					date = ("0" + datetime.getDate()).slice(-2);
			
				var timeDiff = now - datetime;
				var seconds = Math.floor(timeDiff / 1000);
				var minutes = Math.floor(timeDiff / (1000 * 60));
				var hours = Math.floor(timeDiff / (1000 * 60 * 60));
				var days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
			
				var result = "";
			
				if (seconds < 60) {
					result = seconds + this.$t('global.secondago');
				} else if (minutes < 60) {
					result = minutes + this.$t('global.minutesago');
				} else if (hours < 24) {
					result = hours + this.$t('global.hourago');
				} else if (days < 7) {
					result = days + this.$t('global.dayago');
				} else if (year === now.getFullYear()) {
					result = month + this.$t('global.moon') + date + this.$t('global.day');
				} else {
					result = year + this.$t('global.year') + month + this.$t('global.moon') + date + this.$t('global.day');
				}
				return result;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.article-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		margin-right: 20rpx;
		overflow: hidden;
		display: inline-flex;
		flex-direction: column;
		flex-shrink: 0;
		
		/* 中尺寸卡片 */
		&.card-size-medium {
			width: 240rpx;
			
			.article-cover {
				height: 160rpx;
			}
		}
		
		/* 大尺寸卡片 */
		&.card-size-large {
			width: 300rpx;
			
			.article-cover {
				height: 200rpx;
			}
			
			.article-info {
				padding: 16rpx;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
			}
			
			.custom-info {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
			}
		}
		
		/* 在垂直网格布局中的适配样式 */
		.article-grid-item & {
			width: 100% !important;
			margin-right: 0;
			
			&.card-size-large {
				.article-cover {
					height: 240rpx;
				}
			}
		}
	}
	
	.info-items-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		
		.info-item {
			margin-right: 12rpx;
			&:last-child {
				margin-right: 0;
			}
		}
	}
	
	.article-cover {
		width: 100%;
		overflow: hidden;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.article-title {
		padding: 10rpx 12rpx;
		font-size: 26rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		white-space: normal;
		
		&.title-size-medium {
			height: 80rpx;
			-webkit-line-clamp: 2;
			font-size: 26rpx;
		}
		
		&.title-size-large {
			height: 90rpx;
			-webkit-line-clamp: 2;
			font-size: 28rpx;
		}
		
		/* 在垂直网格布局中的标题样式 */
		.article-grid-item &.title-size-large {
			height: auto;
			min-height: 90rpx;
			-webkit-line-clamp: 3;
			font-size: 30rpx;
		}
	}
	
	.article-info {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 12rpx;
		align-items: center;
	}
	
	.custom-info {
		display: flex;
		align-items: center;
		
		.info-item {
			display: flex;
			align-items: center;
			color: #666;
			font-size: 22rpx;
			
			.info-text {
				margin-left: 4rpx;
			}
			.time-text {
				font-size: 20rpx;
			}
		}
	}
	
	.author-info {
		display: flex;
		align-items: center;
		
		.user-avatar {
			position: relative;
			width: 40rpx;
			height: 40rpx;
			margin-right: 8rpx;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				overflow: hidden;
			}
			
			.user-rz-icon {
				position: absolute;
				right: -4rpx;
				bottom: -2rpx;
				width: 16rpx;
				height: 16rpx;
			}
		}
		
		.user-name {
			font-size: 22rpx;
			color: #333;
			max-width: 90rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		
		.name-vip {
			color: #ff6c3e;
		}
	}
</style> 